<template>
  <nav id="navbar"
       class="site-navbar"
       :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand"
          @click="$router.push({ name: 'home' })">
        <!-- <img :src="require('@/assets/img/logo.png')" width="156.22"/> -->
        <!-- | -->
        <!-- <a class="site-navbar__brand-lg" href="javascript:;">{{sysName}}</a> -->
        <!-- <a class="site-navbar__brand-mini" href="javascript:;">{{sysSubName}}</a> -->
      </h1>
    </div>
    <div class="site-navbar__body clearfix">
      <!-- <div class="setUp">
        <div class="lastOne">
          <icon-svg name="xitong" class="svg-set"></icon-svg>
          <span>系统管理</span>
        </div>
      </div> -->
      <div class="header_img">
        <avatar class="headers"
                :size="32"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        <!-- username="胡鹏" background-color="#fff" color="rgb(255, 208, 75)" -->
      </div>

      <!-- <el-menu class="site-navbar__menu" mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">

        </el-menu-item>
      </el-menu> -->
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible"
                     ref="updatePassowrd" />
  </nav>
</template>

<script>
import Avatar from 'vue-avatar';
import UpdatePassword from './main-navbar-update-password';
import { clearLoginInfo } from '@/utils';

export default {
    components: {
        UpdatePassword,
        Avatar,
    },
    data() {
        return {
            showDropdown: false,
            updatePassowrdVisible: false,
            sysName: window.SITE_CONFIG.sysName,
            sysSubName: window.SITE_CONFIG.sysSubName,
        };
    },
    computed: {
        navbarLayoutType: {
            get() {
                return this.$store.state.common.navbarLayoutType;
            },
        },
        sidebarFold: {
            get() {
                return this.$store.state.common.sidebarFold;
            },
            set(val) {
                this.$store.commit('common/updateSidebarFold', val);
            },
        },
        mainTabs: {
            get() {
                return this.$store.state.common.mainTabs;
            },
            set(val) {
                this.$store.commit('common/updateMainTabs', val);
            },
        },
        userName: {
            get() {
                // return this.$store.state.user.name
                return this.$cookie.get('username');
            },
        },
    },
    methods: {
        // 修改密码
        // updatePasswordHandle() {
        //   this.updatePassowrdVisible = true
        //   this.$nextTick(() => {
        //     this.$refs.updatePassowrd.init()
        //   })
        // },
        showDropdchange(e) {
            this.showDropdown = e;
        },
        // 退出
        logoutHandle() {
            this.$confirm('确定<span style="color:red;">退出</span>此帐号?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                dangerouslyUseHTMLString: true,
                // type: 'warning'
            })
                .then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/bams/sys/logout'),
                        method: 'post',
                        data: this.$http.adornData(),
                    }).then(({ data }) => {
                        if (data && data.code === 200) {
                            clearLoginInfo();
                            this.$router.replace({
                                name: 'login',
                            });
                            this.$message.success(data.message);
                        }
                    });
                })
                .catch(() => {});
        },
    },
};
</script>
<style scoped>
.setUp {
    width: 120px;
    float: left;
    height: 80px;
    margin-right: 11px;
}

.lastOne {
    float: left;
    width: 100%;
    font-size: 24px;
    color: #a2a6b8;
    line-height: 80px;
}

.svg-set {
    float: left;
    margin-top: 27px;
    color: white;
}

.lastOne span {
    float: right;
    display: block;
    font-size: 16px;
    color: white;
    margin-right: 20px;
}

.message {
    float: left;
    width: 126px;
    height: 81px;
    text-align: center;
    margin-right: 12px;
    color: #a2a6b8;
    font-size: 24px;
    border-left: 1px solid rgba(162, 166, 184, 0.23921568627450981);
    border-right: 1px solid rgba(162, 166, 184, 0.23921568627450981);
}

.header_img {
    float: left;
    width: 32px;
    height: 80px;
    text-align: center;
    margin-right: 1rem;
}

.headers {
    width: 32px !important;
    height: 80px;
    margin-top: 26px;
    float: left;
}

.header_name {
    float: left;
    color: white;
    width: 64px;
    height: 80px;
    line-height: 80px;
}

.dropdown_last {
    width: 70%;
    float: left;
    color: #c2c2c2;
    line-height: 80px;
    text-align: left;
    margin-right: 60px;
    padding: 0 10px;
}
</style>
